<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	</head>
	<style type="text/css">
		.container{
			display: grid;
			grid-template-columns: 20% 80%;
			grid-template-rows: 100px 600px;
		}
		.search{
			display: grid;
			justify-items: center;
			align-items: center;
			border: 1px lightgray solid;
		}
		#search_text{
			padding: 5px;
			margin: 5px;
			width: 70%;
			border-radius: 5px;
		}
		button{
			border-radius: 5px;
			padding: 3px;
		}
		.current_pat{
			display: grid;
			justify-items: center;
			align-items: center;
			border: 1px solid lightgray;
		}
		.history{
			display: grid;
			grid-template-rows: 50px auto;
			justify-items: center;
			border: 1px solid lightgray;
			overflow: scroll;
		}
		#title{
			display: grid;
			justify-items: center;
			align-items: center;
			background-color: #F4A117;
			width: 100%;
		}
		#list{
			width: 100%;
		}
		.send_h{
			display: grid;
			grid-template-rows: 500px 100px;
			border: 1px solid lightgray;
		}
		.info{
			
			overflow: scroll;
		}
		.send_info{
			display: grid;
			justify-items: center;
			align-items: center;
		}
	</style>
	<body>
		<div class="container">
			<div class="search">
				<span><button type="button" class="btn btn-primary" id="search_history">点击查询历史记录</button></span>
			</div>
		
			<div class="current_pat">
				家医聊天室
			</div>
			
			<div class="history">
				
			</div>
			
			<div class="send_h">
				<div class="info">
						
				</div>
				<div class="send_info">
					<div class="form-group">
						<input type="text" id="msg" onkeydown="return turn(event,this)"/>
						<input type="button" name="" id="" value="发送" onclick="send()" />
						<div>
						    上传图片<input type="file" name = "file" id = "fileId" accept="image/jpeg,image/jpg,image/png"/> 
						    <button  type = "submit" class="btn btn-primary" name = "btn" value = "提交" id = "btnId" onclick="check()">上传图片</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
			<script type="text/javascript">
				var ws = new WebSocket("ws://123.56.67.48:3000");
				// 键盘事件获取
				function turn(e,obj) {
				        var int_keycode
				        if (window.event) {
				            int_keycode = e.keyCode;
				        } else if (e.which) {
				            int_keycode = e.which;
				        }
				        console.log(int_keycode)
				        if (int_keycode == 13) {
				           // $(obj).val()
									 if($("#msg").val() != ""){
										 $(".info").append("</br><div class=\"photo\" style=\"width: 50%;display: grid;grid-template-columns: 15% 85%;\">"+
										  		"<div >"+
										  		"<img src=\"../img/logo.png\" style=\"width:50px ;margin:auto;\">"+
										  		"</div>"+
										  		"<div class=\"pat_msg\" style=\"white-space: normal;word-break:break-all;overflow:hidden;background-color:lightblue;border-radius:5px;\">"+
										  		$("#msg").val()+
										  		"</div>"+
										  		"</div>");
										 $("#msg").val("");
									 }else {
										 alert("文本框为空");
									 }
				        }
				    };
				
				//发送文字消息
				function send(){
					// console.log(kk);
					$(".info").append("</br><div class=\"photo\" style=\"width: 50%;display: grid;grid-template-columns: 15% 85%;\">"+
							"<div >"+
							"<img src=\"../img/logo.png\" style=\"width:50px ;margin:auto;\">"+
							"</div>"+
							"<div class=\"pat_msg\" style=\"white-space: normal;word-break:break-all;overflow:hidden;background-color:lightblue;border-radius:5px;\">"+
							$("#msg").val()+
							"</div>"+
							"</div>");
					var msg = $("#msg").val();
					ws.send(msg);
					$("#msg").val("");
				}
				
				//发送图片信息
				 function check() {
				        var objFile = document.getElementById("fileId");
				        if(objFile.value == "") {
				            alert("不能空")
				        }
								var file = objFile.files[0];
								var reader = new FileReader();
								reader.readAsDataURL(file);
				        reader.onload=function(e) {
				        	// alert('文件读取完成');
				        	imgFile = e.target.result;
				        	console.log(imgFile);
									ws.send(imgFile);
									$(".info").append("</br><div class=\"photo\" style=\"width: 50%;display: grid;grid-template-columns: 15% 85%;\">"+
											"<div >"+
											"<img src=\"../img/logo.png\" style=\"width:50px ;margin:auto;\">"+
											"</div>"+
											"<div class=\"pat_msg\" style=\"white-space: normal;word-break:break-all;overflow:hidden;background-color:lightblue;border-radius:5px;\">"+
											"<img src=\""+imgFile+"\" width=\"100%\"/>"+
											"</div>"+
											"</div>");
				         }
								
				    }
				
				
				ws.onopen = function(evt){
					ws.send("有人上线");
				}
				
				ws.onmessage = function(data){
					console.log(data);
					console.log(data.data.substring(5,10));
					if(data.data.substring(0,4) == 'data'){
						$(".info").append("</br><div class=\"photo\" style=\"width: 50%;display: grid;grid-template-columns: 15% 85%;\">"+
								"<div >"+
								"<img src=\"../img/logo.png\" style=\"width:50px ;margin:auto;\">"+
								"</div>"+
								"<div class=\"pat_msg\" style=\"white-space: normal;word-break:break-all;overflow:hidden;background-color:lightblue;border-radius:5px;\">"+
								"<img src=\""+data.data+"\" width=\"100%\"/>"+
								"</div>"+
								"</div>");
					}
					else {
						$(".info").append("</br><div class=\"photo\" style=\"width: 50%;display: grid;grid-template-columns: 15% 85%;\">"+
								"<div >"+
								"<img src=\"../img/logo.png\" style=\"width:50px ;margin:auto;\">"+
								"</div>"+
								"<div class=\"pat_msg\" style=\"white-space: normal;word-break:break-all;overflow:hidden;background-color:#C2C2C2;border-radius:5px;\">"+
								data.data+
								"</div>"+
								"</div>");
					}
				}
				
				ws.onerror = function(){
					console.log("链接出现错误");
				}
				
				ws.onclose = function(e){
					try{
						ws.send(e);
					}catch(e){
						//TODO handle the exception
						console.log(e)
					}
				}
				
				$("#search_history").click(function(){
					//$(".history").load("http://123.56.67.48/chat/chat.txt");
					$.ajax({
						url:"http://123.56.67.48/chat/chat.txt",
						method:"POST",
						success:function(res){
							res=res.replace(/\n/g,"<br/>");
							$(".history").html(res);
						},
						error:function(res){
							alert("无记录");
						}
					})
				})
				
			</script>
	</body>
</html>
